<template>
	<!-- 邮件 -->
	<view class="myplay-container">
		<view class="building-top">
			<view class="top-search"><u-search placeholder="搜索" shape="square" v-model="keyword"></u-search></view>
			<!-- <view class="top-2"><text>网格:</text>历下区<u-icon name="arrow-down" color="#007AFF" size="24"></u-icon></view> -->
			<view><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs></view>
		</view>
		<view class="play-content">
			<view class="play-item" v-for="(item,index) in playList" :key="index" @click="goEmailInfo">
				<view class="item-mid">{{ item.title }}</view>
				<view class="item-top">
					<view class="top-left">发件人:{{ item.name }}</view>
					<view class="top-right">接收时间:{{ item.time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				keyword:'',
				list: [{
					name: '收件箱'
				}, {
					name: '发件箱'
				}],
				current: 0,
				playList:[
					{
						title:'收到,目前已解决',
						name:'李杰',
						time:'2020-01-12 12:20:00'
					},
					{
						title:'收到,目前已解决',
						name:'李杰',
						time:'2020-01-12 12:20:00'
					}
				]
			}
		},
		methods:{
			onNavigationBarButtonTap() {
			    uni.navigateTo({
			    	url:'../EMail-add/EMail-add'
			    })
			},
			change(index) {
				this.current = index
			},
			goEmailInfo() {
				uni.navigateTo({
					url:'../EMail-info/EMail-info'
				})
			}
		}
	}
</script>

<style lang="scss"  scoped>
	.myplay-container{
		background-color: #f5f6f7;
		min-height: 100vh;
		.building-top{
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 200rpx;
			box-shadow: 3px 3px 3px #eee;
			padding: 20rpx;
			.top-2{
				color: #007AFF;
				font-size: 25rpx;
				margin-top: 30rpx;
				border-bottom: 1px solid #f4f1f1;
				text{
					color: #000;
					display: inline-block;
					margin-right: 10rpx;
				}
			}
		}
	.play-content{
			padding: 220rpx 20rpx 20rpx 20rpx;
			.play-item{
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-around;
				align-items: flex-start;
				flex-direction: column;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				.item-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					.top-left{
						color: #999;
						font-size: 26rpx;
					}
					.top-right{
						color: #007AFF;
						font-size: 24rpx;
					}
				}
				.item-mid{
					
					color: #333;
					font-size: 30rpx;
				}
				.item-bottom{
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
